<template>
  <div class="dashboard-container">
    <!-- 使用全局侧边菜单组件 -->
    <SideMenu
      :menuItems="menuItems"
      :activeMenu="activeMenu"
      title="我的"
      headerIcon="src/assets/images/fk.png"
      @menuClick="handleMenuClick"
    />

    <!-- 主要内容区 -->
    <div class="main-content">
      <component :is="currentComponent"></component>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, markRaw} from 'vue'
import Student from './components/Student.vue'
import apply from './components/apply.vue'

// 菜单项配置 - 现在为动态配置
const menuItems = [
  {
    key: 'student',
    name: '基础信息',
    component: markRaw(Student),
    icon: 'src/assets/images/fk.png'
  },
  {
    key: 'teacher',
    name: '我的活动',
    component: null,
    icon: 'src/assets/images/fk.png'
  },
  {
    key: 'apply',
    name: '我的应用',
    component: markRaw(apply),
    icon: 'src/assets/images/fk.png'
  },
]

// 当前激活的菜单
const activeMenu = ref('student')

// 处理菜单点击
const handleMenuClick = (key) => {
  activeMenu.value = key
}

// 根据当前选中菜单显示对应组件
const currentComponent = computed(() => {
  const item = menuItems.find(item => item.key === activeMenu.value)
  return item?.component || null
})
</script>
<style scoped lang="scss">
.dashboard-container {
  display: flex;
  height: 100%;
  width: 100%;
}

.main-content{
  height: 100%;
  width: 100%;
  background: #F4F9FF;
}
</style>
